<template>
    <a-table :size="size" style="min-height: 198px;" :data-source="dataList" bordered :pagination="false">
        <a-table-column title="参数名" key="key" data-index="key" :width="350">
            <template #default="{ record }">
                <a-input v-if="record.editInputVisible" v-model:value="record.key" placeholder="参数名" />
                <div v-else class="hv-table-label">{{ record.key }}</div>
            </template>
        </a-table-column>
        <a-table-column title="参数值" key="value" data-index="value">
            <template #default="{ record }">
                <a-input v-if="record.editInputVisible" v-model:value="record.value" placeholder="请输入参数值" />
                <div v-else class="hv-table-label">
                    {{ record.value }}
                </div>
            </template>
        </a-table-column>
        <a-table-column key="action" title="操作" :width="160">
            <template #default="{ record, index }">
                <span>
                    <a @click="record.editInputVisible = true" v-if="!record.editInputVisible">
                        编辑
                    </a>
                    <a v-if="record.editInputVisible" @click="confirmRow(record)"> 确认 </a>
                    <a-divider type="vertical" />
                    <a @click="deleteRow(record, index)"> 删除 </a>
                </span>
            </template>
        </a-table-column>
    </a-table>
    <a-button type="dashed" block @click="addRow" class="hv-margin-top10">
        <hv-dynamic-icon iconName="PlusOutlined" />
        添加参数
    </a-button>
</template>

<script lang="ts" setup>
import CommonUtil from '@/visual/commons/utils/common-util';
import { ref, watch } from 'vue';

const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    size: {
        type: String,
        default: 'small'
    }
})

const emit = defineEmits(["update:value"]);

const dataList = ref<{
    key: string,
    value: any,
    editInputVisible: boolean
}[]>([]);

const confirmRow = (record) => {

}

const deleteRow = (record, index) => {

}

const addRow = () => {
    dataList.value.push({
        key: "",
        value: "",
        editInputVisible: true
    })
}

watch(
    () => props.value,
    () => {
        dataList.value = CommonUtil.objToObjArray(props.value, 'key', 'value', (object, key, obj) => {
            object.editInputVisible = false;
        });
    },
    { immediate: true, deep: true }
);


</script>

<style lang="less" scoped>

</style>